import { Button, DotLoading, Modal, Toast } from "antd-mobile";
import React, { useEffect, useState } from "react";
import requewt from "@/utils/requewt";
import { API } from "@/config";
import callFeedback from "@/components/common/modalFeedback";
import { useRouter } from "next/router"
import { appNavigate, appTypeCheck, checkENV2, isValidArr, navigateTo, wxappNavigate } from "@/utils";
import { ItemComp, ResultComp, RuleComp } from "@/components/pages/prize";

export default function ({}) {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(undefined);
  const [env, setEnv] = useState(undefined);
  const [status, setStatus] = useState(undefined);
  const [remain, setRemain] = useState(0);
  const router = useRouter();

  useEffect(() => {
    (async () => {
      // await handler.check();
      await handler.remain();
      await handler.fetch();
    })()

    return () => {
      Modal.clear();
      Toast.clear();
    }
  }, [])


  const handler = {
    // 获取活动状态
    fetch: async () => {
      setLoading(true);

      const resp = await requewt(API.prize.mine);
      console.log(`resp`, resp)
      await setLoading(false)
      if (resp?.error_code !== 0) {
        await Toast.clear();
        await callFeedback({title: resp?.msg || `请求失败`});
        return;
      }
      setData(resp?.data);
    },
    check: async () => {
      const resp = await requewt(API.prize.check);
      console.log(`resp`, resp)
      if (resp?.error_code !== 0) {
        await Toast.clear();
        await callFeedback({title: resp?.msg || `请求失败`});
        return;
      }
      if (resp?.data === 1) {
        await handler.reward()
      }

    },
    remain: async () => {
      setLoading(true);
      const resp = await requewt(API.game.remain);
      setTimeout(() => setLoading(false), 300);
      if (resp?.error_code !== 0) {
        await callFeedback({title: resp?.msg || `请求失败`});
        return;
      }
      if (resp?.data > 0) setRemain(resp?.data);
    },
    reward: async () => {
      const resp = await requewt(API.prize.reward);
      console.log(`resp`, resp)
      if (resp?.error_code !== 0) {
        await Toast.clear();
        await callFeedback({title: resp?.msg || `请求失败`});
        return;
      }

      const m = callFeedback({
        bodyClassName: `act-feedback-modal cp-prize-result close-hidden`,
        content: <div className="inner">
          <ResultComp result={resp?.data} />
        </div>,
        actions: <></>,
        closeOnAction: true,
        closeOnMaskClick: true,
      })
    },
    filled: () => {
      handler.fetch();
      Modal.clear();
    },
    rule: () => {
      const m = callFeedback({
        bodyClassName: `act-feedback-modal close-at-center-bottom`,
        content: <div className="inner"><RuleComp /></div>,
        actions: [
          <Button shape={`rounded`} size={`small`}
                  loading={loading}
                  className="act-btn act-btn-bevel"
                  onClick={e => m.close()}
          >
            确定
          </Button>
        ],
        closeOnAction: true,
        closeOnMaskClick: true,
      })
    }
    // 发帖
    // 领取奖励
  }

  return (
    <>
      <div className="position-center">

        <div className="header">
          我的奖励
        </div>
        <div className="content">

          <div className="prizes">
            <div className="cp-prize-title">奖励列表</div>

            <div className="cp-prize-columns">
              <div className="date">时间</div>
              <div className="type">奖品类型</div>
              <div className="value">奖品内容</div>
            </div>

            {
              loading ?
                <div className="p-3"><DotLoading /></div>
                :
                isValidArr(data) ?
                  data.map((item, index) => {
                    return (
                      <ItemComp item={item} key={index} />
                    )
                  })
                  :
                  <div className="p-3">暂无</div>
            }

          </div>

          <div className="info">
            周度排行每周一0点锁定<br />
            奖励内容于每周一上午5点统一更新<br />
            上周奖励将于次周周三前完成发放
          </div>
        </div>
        <div className="footer">
          <Button shape={`rounded`}
                  loading={loading}
                  className="act-btn act-btn-bevel"
                  onClick={async e => {
                    if (remain > 0) {
                      await navigateTo(`/game`)
                    } else {
                      Toast.show({content: `今日游戏次数已用完`})
                    }
                  }}
          >
            参加游戏
          </Button>
          <Button shape={`rounded`}
                  loading={loading}
                  className="act-btn act-btn-bevel"
                  onClick={e => navigateTo(`/landing`)}
          >
            返回首页
          </Button>
        </div>
      </div>
    </>
  )
}